<template>
    <div class="console">
        <div class="nav_link">
            <ul>
                <li
                v-for="(item, index) in nav_link" 
                :key="index"
                @click="gotoPage(item.path)"
                >
                    <el-image :src="item.icon"></el-image>
                    <p>{{item.text}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Console',
    data() {
        return {
            nav_link: [
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '新ERP系统',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '网经系统',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: 'OA系统',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '报数系统',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '论坛系统',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '公司官网',
                    path: '/home'
                },
                {
                    icon: require('@/assets/icon_demo.png'),
                    text: '旧ERP系统',
                    path: '/home'
                }
            ]
        }
    },
    methods: {
        gotoPage(path) {
            let routeData = this.$router.resolve({
                path: path
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>

<style lang="scss" scoped>
.nav_link{
    margin: 15px;
    background-color: #F9F9F9;
    border-radius: 5px;

    ul{
        overflow: hidden;

        li{
            float: left;
            width: 14.28%;
            padding: 30px 0;
            cursor: pointer;

            &:hover{
                background-color: #EDEDED;
            }

            .el-image{
                display: block;
                width: 38%;
                margin: 0 auto;
            }

            p{
                text-align: center;
                padding-top: 10px;
            }
        }
    }
}
</style>